<%--
  Created by IntelliJ IDEA.
  User: 寒凝
  Date: 2022/10/15
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(["element", "jquery", "layer", "form", "table",'upload'], function() {
                var $ = layui.jquery;
                var element = layui.element;
                var upload = layui.upload;
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                var url;
                var tanIndex;
                //展示已知数据
                var mytable = table.render({
                    elem: '#demo'
                    , url: 'getAllDisbure'
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , even: true   //开启间隔行的背景颜色
                    , page: true //是否显示分页
                    , limits: [10,15,20]
                    , limit: 10 //每页默认显示的数量
                    , cols: [[//标题栏

                         {field: 'paidId', align: 'center',hide:true}
                        ,{field: 'order.orderNum', title: '订单号', width: 275,templet:function (d) {return d.order.orderNum}, align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        , {field: 'client.clientName', title: '退款用户', width: 90, templet:function (d) {return d.client.clientName},align: 'center'}
                        , {field: 'room.roomPrice', title: '房间价格', sort: true, width: 120, templet:function (d) {return d.room.roomPrice},align: 'center'}
                        , {field: 'utilities', title: '水电费', width: 120, align: 'center'}
                        , {field: 'paidTime', title: '支出时间', sort: true, width: 180, align: 'center'}
                        , {field: 'cause', title: '备注', width: 100, align: 'center'}
                        , {
                            field: 'right', title: '操作',
                            toolbar: '#barDemo',
                            width: 180,
                            align: 'center'
                        }
                    ]]
                });

            //搜索
            $("#selectName").click(function () {
                mytable.reload({
                    page: {curr: 1 , limit: 5},
                    method: 'POST',
                    url: 'getAllDisbure',
                    where: {
                        clientName: $("#clientName").val() //参数 多个值,逗号隔开
                    }
                })
            })

            //新增form表单
            form.on("submit(dosubmit)",function(obj){
                //序列化表单数据
                var params=$("#dataform").serialize();
                $.post(url,params,function(data){
                    //刷新数据表格
                    mytable.reload();
                    //关闭弹出层
                    layer.close(tanIndex);
                });
            })

            //删除操作
            //每行按钮监听
            table.on('tool(demo)', function(obj){
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是  表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent =='edit'){
                    //修改操作
                    openUpdate(data);
                }else if(layEvent =='delete'){
                    //删除操作
                    layer.confirm('确定删除吗?', function(index){
                        $.get("delDisById","paidId="+data.paidId,function(back){
                            //刷新数据表格
                            mytable.reload();
                        });
                        layer.close(index);
                    });
                }
            });

            //修改弹出框
            function openUpdate(row){
                tanIndex= layer.open({
                    type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                    title:'修改支出信息',  //标题
                    content:$("#addroom2"), //内容  type=0 的内容
                    skin:'layui-layer-molv',//skin - 样式类名
                    area:['350px','280px'],  //area - 宽高
                    offset:[50,300],//offset - 坐标 默认：垂直水平居中
                    btnAlign:'c',//按钮排列
                    closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                    anim: 4,//设置动画
                    maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                    success:function(index){
                        url="updateDisById";
                        //给表单赋值
                        form.val('dataform',row);

                    }
                });
            }
            })
    </script>

</head>
<body>
            <div class="layui-inline">

                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                <input type="text" name="clientName" id="clientName" autocomplete="off" class="layui-input" placeholder="输入用户名查询">
                </div>
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="selectName">查询</button>

                </div>
                <!-- 表格行内toolbar -->
                <div style="display: none;" id="barDemo">
                <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
            lay-event="edit">编辑</a>
<%--                <a class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
            lay-event="delete">删除</a>--%>
                </div>
                <table class="layui-hide" id="demo" lay-filter="demo"></table>



            <div id="addroom2"  style="display: none;height: 300px;">
                <form  class="layui-form" lay-filter="dataform" id="dataform" method="post">

                    <div class="layui-form-item" style="display: none;">
                        <label class="layui-form-label" >房间ID：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="paidId"
                                   autocomplete="off" placeholder="房间ID不可选" class="layui-input" readonly value="0">
                        </div>
                    </div>


<%--                    <div class="layui-form-item">--%>
<%--                        <label class="layui-form-label">用户:</label>--%>
<%--                        <div class="layui-input-inline">--%>
<%--                            <select name="clientId">--%>
<%--                                <option value="">请选择</option>--%>
<%--                                <option value="1">胖虎</option>--%>
<%--                                <option value="2">李四 </option>--%>
<%--                                <option value="3">五姐</option>--%>
<%--                                <option value="4">千智</option>--%>
<%--                                <option value="5">七妹</option>--%>
<%--                                <option value="6">细狗</option>--%>
<%--                                <option value="7">小红</option>--%>
<%--                                <option value="8">张某</option>--%>
<%--                                <option value="9">坤坤</option>--%>
<%--                                <option value="10">张三</option>--%>
<%--                            </select>--%>
<%--                        </div>--%>
<%--                    </div>--%>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">水电费：</label>
                        <div class="layui-input-inline">
                            <input type="number" name="utilities" required lay-verify="required"
                                   autocomplete="off" placeholder="水电费" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item" >
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="cause" required lay-verify="required"
                                   autocomplete="off" placeholder="备注" class="layui-input">
                        </div>
                    </div>

                    <%--<div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label " style="width: 100px">入住及退房时间</label>
                            <div class="layui-inline" id="test6">
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" id="date1" name="startTime" class="layui-input" placeholder="入住日期">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" autocomplete="off" id="date2" name="endTime" class="layui-input" placeholder="退房日期">
                                </div>
                            </div>
                        </div>
                    </div>--%>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
</body>
</html>
